import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { useHistory } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import DesignGalleryComponent from '../components/DesignGallery';

const DesignGallery: React.FC = () => {
  const { user } = useAuth();
  const history = useHistory();

  const handleCreateDesign = () => {
    history.push('/design');
  };

  if (!user) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center">
        <div className="text-center bg-white/80 backdrop-blur-sm p-8 rounded-xl shadow-xl">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Please log in to view your designs</h2>
          <p className="text-gray-600">You need to be logged in to access design features.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-5">
      {/* 装饰元素 */}
      <div className="fixed top-0 right-0 w-1/3 h-1/3 bg-gradient-to-br from-blue-300/20 to-purple-300/20 rounded-bl-full -z-10 blur-3xl"></div>
      <div className="fixed bottom-0 left-0 w-1/3 h-1/3 bg-gradient-to-tr from-indigo-300/20 to-pink-300/20 rounded-tr-full -z-10 blur-3xl"></div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-6">
          <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 mb-4">Design Gallery</h1>
          <p className="text-xl text-gray-700">View and manage your AI-generated room designs</p>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
          className="w-full"
        >
          <DesignGalleryComponent onCreateDesign={handleCreateDesign} />
        </motion.div>
      </div>
    </div>
  );
};

export default DesignGallery;